<template>
    <div class="cart_container">
        <!-- 全场换购 -->
        <div class="exchange_container" style="height: 146px;">
            <div class="exchange">
                <div class="top_item">
                    <div class="2200 flex">
                        <p class="title">全场换购</p>
                        <p class="tip">已满0.01元，可选择10件商品换购</p>
                        <span><a href="javascript:;" class="jump">去换购 ></a></span>
                    </div>
                </div>

                <van-swipe :loop="false" :width="265" :show-indicators="false">
                    <van-swipe-item style="width: 242px;">
                        <div class="exchange_item_container">
                            <div class="exchange_item flex" style="margin: 0px 5px;">

                                <div class="exchange_item_left ">
                                    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                                </div>
                                <div class="exchange_item_right flex_c">
                                    <div>
                                        <p class="tip goods_title" style="height: 20px;">地道凯里口味，贵州酸辣粉贵州酸辣粉贵州酸辣粉</p>
                                    </div>
                                    <div>
                                        <p class="goods_info" style="height: 16px;">秘制凯里 147克/桶</p>
                                    </div>
                                    <div class="exchange_price flex" style="height: 20px; justify-content: space-between;">
                                        <div class="exchange_price_left flex">
                                            <p class="jump">换购价</p>
                                            <p class="symbol jump">￥</p>
                                            <p class="jump goods_price">10.5</p>
                                            <p class="old_price"
                                                style="text-decoration-line: line-through;font-size: 10px;color: #999999;line-height: 1;line-height: 15px;text-align: center;">
                                                ￥12</p>
                                        </div>
                                        <div class="exchange_price_flex_right">
                                            <img src="	https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png"
                                                style="margin: 0 0 5px 0 ;" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item style="width: 242px;">
                        <div class="exchange_item_container">
                            <div class="exchange_item flex" style="margin: 0px 5px;">

                                <div class="exchange_item_left ">
                                    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                                </div>
                                <div class="exchange_item_right flex_c">
                                    <div>
                                        <p class="tip goods_title" style="height: 20px;">地道凯里口味，贵州酸辣粉贵州酸辣粉贵州酸辣粉</p>
                                    </div>
                                    <div>
                                        <p class="goods_info" style="height: 16px;">秘制凯里 147克/桶</p>
                                    </div>
                                    <div class="exchange_price flex" style="height: 20px; justify-content: space-between;">
                                        <div class="exchange_price_left flex">
                                            <p class="jump">换购价</p>
                                            <p class="symbol jump">￥</p>
                                            <p class="jump goods_price">10.5</p>
                                            <p class="old_price"
                                                style="text-decoration-line: line-through;font-size: 10px;color: #999999;line-height: 1;line-height: 15px;text-align: center;">
                                                ￥12</p>
                                        </div>
                                        <div class="exchange_price_flex_right">
                                            <img src="	https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png"
                                                alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item style="width: 242px;">
                        <div class="exchange_item_container">
                            <div class="exchange_item flex" style="margin: 0px 5px;">

                                <div class="exchange_item_left ">
                                    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                                </div>
                                <div class="exchange_item_right flex_c">
                                    <div>
                                        <p class="tip goods_title" style="height: 20px;">地道凯里口味，贵州酸辣粉贵州酸辣粉贵州酸辣粉</p>
                                    </div>
                                    <div>
                                        <p class="goods_info" style="height: 16px;">秘制凯里 147克/桶</p>
                                    </div>
                                    <div class="exchange_price flex" style="height: 20px; justify-content: space-between;">
                                        <div class="exchange_price_left flex">
                                            <p class="jump">换购价</p>
                                            <p class="symbol jump">￥</p>
                                            <p class="jump goods_price">10.5</p>
                                            <p class="old_price"
                                                style="text-decoration-line: line-through;font-size: 10px;color: #999999;line-height: 1;line-height: 15px;text-align: center;">
                                                ￥12</p>
                                        </div>
                                        <div class="exchange_price_flex_right">
                                            <img src="	https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png"
                                                alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item style="width: 242px;">
                        <div class="exchange_item_container">
                            <div class="exchange_item flex" style="margin: 0px 5px;">

                                <div class="exchange_item_left ">
                                    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                                </div>
                                <div class="exchange_item_right flex_c">
                                    <div>
                                        <p class="tip goods_title" style="height: 20px;">地道凯里口味，贵州酸辣粉贵州酸辣粉贵州酸辣粉</p>
                                    </div>
                                    <div>
                                        <p class="goods_info" style="height: 16px;">秘制凯里 147克/桶</p>
                                    </div>
                                    <div class="exchange_price flex" style="height: 20px; justify-content: space-between;">
                                        <div class="exchange_price_left flex">
                                            <p class="jump">换购价</p>
                                            <p class="symbol jump">￥</p>
                                            <p class="jump goods_price">10.5</p>
                                            <p class="old_price"
                                                style="text-decoration-line: line-through;font-size: 10px;color: #999999;line-height: 1;line-height: 15px;text-align: center;">
                                                ￥12</p>
                                        </div>
                                        <div class="exchange_price_flex_right">
                                            <img src="	https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png"
                                                alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-item>
                    <div class="exchange_item_more" style="margin: 0 0 12px 0;">
                        <span><a href="javascript:;" class="jump">查看更多 ></a></span>
                    </div>
                </van-swipe>

            </div>
        </div>


        <!-- 商品；列表 -->
        <div class="goods_list">
            <van-checkbox-group >
                <div class="top_item">
                    <div class="header_title flex ">


                        <div class="header_title_left flex">
                            <van-radio name="1"></van-radio>
                            <p class="title">99元包邮</p>
                        </div>
                        <div class="header_title_right flex">
                            <p class="tip">已满99包邮</p>
                            <span><a href="javascript:;" class="jump">去逛逛 ></a></span>
                        </div>

                    </div>
                    <div class="present flex">
                        <div class="present_left flex">
                            <van-tag round type="danger">满赠</van-tag>
                            <p class="tip">已满足每满1件领取赠品</p>
                        </div>
                        <span><a href="" class="jump">领取赠品 ></a></span>
                    </div>
                </div>
                <van-checkbox v-for="goodsListItem in cartListArr" checked-color="#ee0a24" :key="goodsListItem.id"
                    :name="goodsListItem.skuId">
                    <van-swipe-cell>
                        <van-card title="商品标题" :thumb="goodsListItem.imgUrl" class="white_bg">
                            <template #tags>
                                <div class="goods_parameter ellipsis"><span>
                                        <p>
                                            A类丁子灰(床单款) ;1.5m (床单款) ;1.5m (床单款) ;1.5m
                                        </p>
                                    </span></div>
                            </template>
                            <template #title>
                                <div class="goods_title_container flex_c">
                                    <div class="title_info flex">
                                        <span class="title_right"> 每日抄底</span>
                                        <span class="ellipsis"> {{ goodsListItem.skuName }}</span>
                                    </div>
                                </div>
                            </template>
                            <template #num>
                                <span><van-stepper theme="round" input-width="16px" button-size="16px"
                                        v-model="goodsListItem.skuNum" disable-input /></span>
                            </template>
                            <template #price>
                                <div class="price_container">
                                    <span class="old_price"> ￥{{ goodsListItem.skuPrice }} </span>
                                    <span class="save_price"> 优惠后￥{{ goodsListItem.cartPrice }} </span>
                                </div>
                            </template>
                        </van-card>
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </van-checkbox>


            </van-checkbox-group>
        </div>

        <!-- 购物车底部总价相关 -->
        <div class="submit_bar">
            <van-submit-bar :price="3050" button-text="结算(4)" @submit="onSubmit" class="mb_30">
                <van-checkbox checked-color="#ee0a24">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
                </template>
            </van-submit-bar>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { showToast, showFailToast } from 'vant';
import { ref, onMounted } from 'vue'
import cartApi from '@/api/cart/cart'
// import type { CartListAttrModel } from '@/api/cart'

// 复选框组
// const checked = ref(['2', '4']);

// const checked: any = ref(true);

const onSubmit = () => showToast('点击按钮');
const onClickLink = () => showToast('修改地址');


// 模拟假数据动态渲染
const cartListArr = ref<any>([
    {
        "id": 61,
        "userId": "2",
        "skuId": 4,
        "cartPrice": 5999,
        "skuNum": 4,
        "imgUrl":
            "http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-sklaALrngAAHGDqdpFtU741.jpg",
        "skuName": "Apple iPhone 11 (A2223) ",
        "isChecked": 1,
        "skuPrice": 5999

    },
    {
        "id": 62,
        "userId": "2",
        "skuId": 2,
        "cartPrice": 5499,
        "skuNum": 1,
        "imgUrl":
            "http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-sklaALrngAAHGDqdpFtU741.jpg",
        "skuName": "Apple iPhone 11 (A2223) 64GB 红色",
        "isChecked": 0,
        "skuPrice": 5499
    }

])


// 获取购物车列表
// const cartListArr = ref<CartListAttrModel>([])
const getCartList = async () => {
    try {
        const result = await cartApi.reqCartList()

    } catch (error) {
        console.error(error);
        showFailToast('获取购物车列表失败');
    }
}

onMounted(() => {
    getCartList()
    console.log(cartListArr);
})

</script>
    
<style lang = "less" scoped>
// 全局样式
.flex {
    display: flex;
}

.flex_c {
    display: flex;
    flex-direction: column;
}

// 单行文字超出部分变为省略号
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart_container {
    background-color: #f4f4f4;
    height: 667px;
    padding-top: 10px;
}

// 全场换购
.exchange_item_container {
    padding-right: 5px;
}

// 全场换购item

.exchange_item {
    justify-content: space-between;
    margin: 0px;

    .exchange_item_left {
        width: 70px;
        height: 70px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .exchange_item_right {
        width: 139px;
        justify-content: space-evenly;

        .goods_title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .goods_info {
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            font-size: 12px;
            color: #333333;
            text-align: left;
        }

        .symbol {
            font-size: 10px;
        }

        .exchange_peice {
            .exchange_price_left {
                justify-content: space-between;
                margin-top: 4px;
                height: 20px;
                text-align: center;

                .goods_price {
                    font-size: 15px;
                    line-height: 15px;
                    text-align: center;
                }

                .old_price {
                    text-decoration-line: line-through;
                    font-size: 10px;
                    color: #999999;
                    line-height: 1;
                    line-height: 15px;
                    text-align: center;
                }
            }
        }

        img {
            width: 20px;
            height: 20px;
            margin: 5px;
        }
    }
}

// 删除滑块
.goods-card {
    margin: 0;
    background-color: white;

}

.delete-button {
    height: 100%;
}

// 数据卡片详情
.white_bg {
    background-color: #fff;
}

.goods_parameter {
    height: 19px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 21px;
    padding: 0 11px 0 6px;
    background: #f4f4f4;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 177px;
}

.price_container {
    margin-bottom: 15px;
}

.old_price {
    font-size: 16px;
}

.save_price {
    font-size: 12px;
    color: #FA1E32;
}

.title_right {
    width: 66px;
    white-space: nowrap;
    font-size: 15px;
    color: #FA1E32;
    margin-right: 10px;
}

.goods_title_container {
    justify-content: space-around;
}

.title_info {
    width: 195px;

}

.present {
    justify-content: space-between;
    margin-top: 12px;
}

.header_title {
    justify-content: space-between;
}

.present {
    margin-top: 12px;
}

.top_item {
    padding: 12px;
}

.top_item {
    padding: 12px;
}

/deep/.van-checkbox__label {
    flex: 1;
}

.van-checkbox-group {
    background-color: #fff;

    .van-checkbox {
        padding: .1rem .15rem;

    }
}

.van-submit-bar {
    bottom: .5rem;
    border-bottom: 1px solid #ccc;
}

.van-stepper {
    text-align: right;
}

.van-button--square {
    height: 100%;
}

// 商品列表有剩余高度
.goods_list {
    padding-bottom: 120px;
}

// 全场换购
.van-checkbox-group {
    margin: var(--van-coupon-margin);
    overflow: hidden;
    background: var(--van-coupon-background);
    border-radius: var(--van-coupon-radius);
    box-shadow: var(--van-coupon-shadow);
}

.exchange {
    margin: var(--van-coupon-margin);
    overflow: hidden;
    background: var(--van-coupon-background);
    border-radius: var(--van-coupon-radius);
    box-shadow: var(--van-coupon-shadow);
}

.exchange_item {
    width: 225px;
    height: 70px;
    margin: var(--van-coupon-margin);
    overflow: hidden;
    background: #FAFAFA;
    border-radius: var(--van-coupon-radius);
    box-shadow: var(--van-coupon-shadow);

}


.exchange_item_more {
    height: 70px;
    width: 77px;
    margin: var(--van-coupon-margin);
    overflow: hidden;
    background: #FAFAFA;
    border-radius: var(--van-coupon-radius);
    box-shadow: var(--van-coupon-shadow);
    line-height: 70px;
    text-align: center;
}

//购物车底部总价相关
.mb_30 {
    margin-bottom: 30px;
}

// 标题文字
.title {
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-left: 10px;
}

// 说明文字
.tip {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 12px;
    color: #333333;
    text-align: right;
    text-align: center;
}

// a链接样式
.jump {
    font-size: 12px;
    color: #FA1E32;
}

.exchange_item .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
  
<style lang="less" scoped >
// 字体大小
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
menu,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    font-size: .14rem;
}
</style>